<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>尚优选详情页面</title>
	<link rel="stylesheet" href="../css/reset.css" />
	<link rel="stylesheet" href="../css/index.css" />
</head>

<body>
	<!--最外层包裹元素-->
	<div id="wrapper">
		<!--头部-->
		<header id="header">
			<!--上半部分-->
			<div class="headTop">
				<!--版心元素-->
				<div class="headTopMain">
					<!--左侧-->
					<div class="left">
						<h5>欢迎来到尚优选！ 请</h5>
						<p>
							<a herf="javascrip:;">登录</a>
							<a herf="javascrip:;">注册</a>
						</p>
					</div>
					<!--右侧-->
					<div class="right">
						<nav>
							<a href="JavaScript:;">我的订单</a>
							<a href="JavaScript:;">我的购物车</a>
							<a href="JavaScript:;">我的尚优选</a>
							<a href="JavaScript:;">尚优选会员</a>
							<a href="JavaScript:;">企业采购</a>
							<a href="JavaScript:;">关注尚优选</a>
							<a href="JavaScript:;">合作招商</a>
							<a href="JavaScript:;">商家后台</a>
						</nav>
					</div>
				</div>
			</div>
			<div class="headBottom">
				<!--头部下半部版心-->
				<div class="headBottomMain">
					<!--logo-->
					<h1 class="logo">
						<a href="JavaScript:;">
							<img src="../images/logo.png" alt="">
						</a>
					</h1>
					<!--搜索框-->
					<div class="search">
						<!-- input 中的提示文本信息-->
						<input type="text" placeholder="请输入搜索内容">
						<input type="submit" value="搜索">
					</div>
				</div>
			</div>
		</header>
		<!--头部结束-->
		<!--导航-->
		<div id="navWrap">
			<!--版心元素-->
			<div class="navWrapMain">
				<a href="JavaScript:;">全部商品分类</a>
				<a href="JavaScript:;">服装城</a>
				<a href="JavaScript:;">美妆馆</a>
				<a href="JavaScript:;">尚优选超市</a>
				<a href="JavaScript:;">全球购</a>
				<a href="JavaScript:;">闪购</a>
				<a href="JavaScript:;">团购</a>
				<a href="JavaScript:;">有趣</a>
				<a href="JavaScript:;">秒杀</a>
			</div>
		</div>
		<!--内容开始区域-->
		<div id="content">
			<!--版心内容-->
			<div class="contentMain">
				<!--路径导航-->
				<div class="navPath" id="navPath">
				</div>
			</div>
			<!--中间区域开始-->
			<div id="center">
				<!--左侧放大镜-->
				<div id="left">
					<div id="leftTop">
						<!--上面-->
						<div id="smallPic">
							<!--小图片-->
							<img src="..\images\s1.png" alt="small">

						</div>


					</div>
					<div id="leftBottom">
						<a href="JavaScript:;" id="leftarry">
							</a>
								<div id="picList">
									<ul>

									</ul>
								</div>
								<a href="JavaScript:;" id="rightarry">></a>
					</div>
				</div>
				<!--右侧商品详细展示区-->
				<div id="right">
					<!--上半部分商品数据-->
					<div class="rightTop" id="rightTop">
					</div>
					<!--下半部分商品参数-->
					<div class="rightBottom">
						<!--选择之后结果-->
						<div class="choose">

						</div>
						<!--商品参数选择区域-->
						<div class="chooseWrap" id="chooseWrap">
						</div>
						<!--加入购物车及数量区域-->
						<div class="addCar">
							<div class="count">
								<input type="text" title="car">
								<a href="JavaScript:;">+</a>
								<a href="JavaScript:;">-</a>
							</div>
							<button>加入购物车</button>
						</div>
					</div>
				</div>

			</div>
			<!--商品详情中间部分开始-->
			<div class="goodsDetailWarp">
				<!--左边栏-->
				<aside class="leftAside">
					<!--上边-->
					<div class="asideTop">
						<h4 class="active">相关分类</h4>
						<h4>推荐品牌</h4>
					</div>

					<!--下边-->
					<div class="aslideContent">
						<div class="active">
							<ul class="goodslist1">
								<li>手机</li>
								<li>手机壳</li>
								<li>内存卡</li>
								<li>iPhone 配件</li>
								<li>贴膜</li>
								<li>手机耳机</li>
								<li>移动电源</li>
								<li>平板电脑</li>
							</ul>
							<ul class="goodslist2">
								<li>
									<img src="../images/part01.png" alt="01">
									<span>Apple苹果iphone(A1966)</span>
									<p>¥6088.00</p>
									<div class="button">
										<a href="JavaScript:;">加入购物车</a>
									</div>
								</li>
								<li>
									<img src="../images/part01.png" alt="01">
									<span>Apple苹果iphone(A1966)</span>
									<p>¥6088.00</p>
									<div class="button">
										<a href="JavaScript:;">加入购物车</a>
									</div>
								</li>
								<li>
									<img src="../images/part01.png" alt="01">
									<span>Apple苹果iphone(A1966)</span>
									<p>¥6088.00</p>
									<div class="button">
										<a href="JavaScript:;">加入购物车</a>
									</div>
								</li>
								<li>
									<img src="../images/part01.png" alt="01">
									<span>Apple苹果iphone(A1966)</span>
									<p>¥6088.00</p>
									<div class="button">
										<a href="JavaScript:;">加入购物车</a>
									</div>
								</li>
							</ul>
						</div>
						<div>推荐品牌</div>
					</div>
				</aside>
				<!--右边结构-->
				<div class="rightDetail">
					<div class="chooseBox">
						<!--标题-->
						<h4>选择搭配</h4>
						<!--内容-->
						<div class="listWrap">
							<!--左-->
							<div class="left">
								<img src="../images/l-m01.png" alt="m01">
								<p id="leftprices">¥5299</p>
								<i>+</i>
							</div>
							<!--中-->
							<ul class="middle">
								<li>
									<img src="../images/dp01.png" alt="1">
									<span>feless菲勒斯VR</span>
									<div>
										<input type="checkbox" title="check" value="50"></input>
										<span>50</span>
									</div>
								</li>
								<li>
									<img src="../images/dp02.png" alt="1">
									<span>feless菲勒斯VR</span>
									<div>
										<input type="checkbox" title="check" value="50">
										<span>50</span>
									</div>
								</li>
								<li>
									<img src="../images/dp03.png" alt="1">
									<span>feless菲勒斯VR</span>
									<div>
										<input type="checkbox" title="check" value="50">
										<span>50</span>
									</div>
								</li>
								<li>
									<img src="../images/dp04.png" alt="1">
									<span>feless菲勒斯VR</span>
									<div>
										<input type="checkbox" title="check" value="50">
										<span>50</span>
									</div>
								</li>
							</ul>
							<!--右-->
							<div class="right">
								<div>已购0件商品</div>
								<p>套餐价</p>
								<i id="rightprices">¥5299</i>
								<div>
									<button>加入购物车</button>
								</div>
							</div>
						</div>

					</div>
					<!--选项卡开始-->
					<div class="BottomDetail">
						<!--菜单-->
						<ul class="tabBtn">
							<li class="active"><a href="JavaScript:;">商品介绍</a></li>
							<li><a href="JavaScript:;">规格包装</a></li>
							<li><a href="JavaScript:;">售后与保障</a></li>
							<li><a href="JavaScript:;">商品评价</a></li>
							<li><a href="JavaScript:;">手机社区</a></li>
						</ul>
						<!--内容-->
						<div class="tabContents">
							<div class="active">
								<ul>
									<li>分辨率：1920*1080(FHD)</li>
									<li>后置摄像头：1200万像素</li>
									<li>前置摄像头：500万像素</li>
									<li>核 数：其他</li>
									<li>频 率：以官网信息为准</li>
									<li>品牌： Apple</li>
									<li>商品名称：APPLEiPhone 6s Plus</li>
									<li>商品编号：1861098</li>
									<li>商品产地：中国大陆</li>
									<li>商品毛重：0.51kg</li>
									<li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
									<li>系统：苹果（IOS）</li>
									<li>像素：1000-1600万品毛重：0.51kg</li>
									<li>机身内存：64GB</li>
								</ul>
								<img src="../images/intro01.png" alt="01">
								<img src="../images/intro02.png" alt="02">
								<img src="../images/intro03.png" alt="03">
							</div>
							<div>规格包装</div>
							<div>售后与保障</div>
							<div>商品评价</div>
							<div>手机社区</div>
						</div>

					</div>
				</div>

			</div>

		</div>

		<!--右侧侧边栏开始-->
		<div class="rightAside asideClose">
			<!--按钮区域-->
			<div class="btns btnsClose"></div>
			<!--内容区域-->
			<div class="content"></div>
			<!--侧边导航-->
			<ul class="navlist">
				<li>
					<p></p>
					<i>尚选会员</i>
				</li>
				<li>
					<p></p>
					<i>尚选会员</i>
				</li>
				<li>
					<p></p>
					<i>尚选会员</i>
				</li>
				<li>
					<p></p>
					<i>尚选会员</i>
				</li>
				<li>
					<p></p>
					<i>尚选会员</i>
				</li>
			</ul>
		</div>
	</div>
</body>

<script src="..\JavaScript\data.js"></script>
<script src="..\JavaScript\index.js"></script>

</html>